<!--
 * @Author: 张升 1562821455@qq.com
 * @Date: 2024-09-02 10:31:45
 * @LastEditors: 张升 1562821455@qq.com
 * @LastEditTime: 2024-09-02 11:47:10
 * @FilePath: \undefinedc:\Users\Administrator\Desktop\1.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css垂直居中</title>
</head>
<style>
    body {
        height: 100vh;
        margin: 0;
        padding: 0;
    }
    .out-box {
        height: 100%;
    }
    /* 1 table布局 */
    /* .out-box {
        display: table;
    }
    .inner-box {
        display: table-cell;
        vertical-align: middle;
    } */
    /* 2 定位法 */
    /* .out-box {
        position: relative;
    }
    .inner-box {
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    } */
    /* 3 伪元素法 */
    /* .out-box::before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    .inner-box {
        display: inline-block;
        vertical-align: middle;
    } */
    /* 4 单行flex布局 */
    /* .out-box {
        display: flex;
        align-items: center;
    } */
    /* 5 多行flex布局 */
    /* .out-box {
        display: flex;
        flex-flow: row wrap;
        align-content: center;
    } */
    /* 6 grid布局 */
    /* .out-box {
        display: grid;
        align-content: center;
    } */
    /* 7 grid布局单元格 */
    /* place-items: center; */ /* 可直接做到水平，垂直都居中 */
    /* .out-box {
        display: grid;
        align-items: center;
    } */
    /* 8 margin-block: auto */
    /* .out-box {
        display: grid;
    }
    .inner-box {
        margin-block: auto;
    } */
    /* 9 直接 align-content */
    .out-box {
        align-content: center;
    }
</style>
<body>
    <div class="out-box">
        <div class="inner-box">
            回复看电视剧肯定多喝水等级考试第三课等级考试佳都科技苏卡达就开始进度款
            <div>
                takzhang<sup>[1]</sup>
                NH<sub>4</sub>HCO<sub>3</sub>
            </div>
        </div>
    </div>
</body>
</html>